.category {
	display: flex;
	flex-flow: column nowrap;
	height: 100%;

	.category_search {
		width: 100%;
		background-color: #f1f1f1;
		border-bottom: 12rpx solid #f1f1f1;

		.van-search {
			height: 100rpx;
			padding: 0 32rpx;
		}

		.van-search__content {
			background-color: #f1f1f1;
		}
	}

	.sidebar {
		display: flex;
		// min-height: calc(100vh - 112rpx);

		.first {
			width: 200rpx;
			background-color: #f1f1f1;

			.van-sidebar {
				width: 200rpx;
				background-color: #f1f1f1;

				.van-sidebar-item {
					position: relative;
					padding: 28rpx;
					background-color: #f1f1f1;
					border: none;
				}

				.van-sidebar-item--selected::before {
					content: '';
					position: absolute;
					top: 50%;
					left: 14rpx;
					transform: translateY(-50%);
					width: 6rpx;
					height: 16rpx;
					background-color: #FF7733FF;
				}

				.van-sidebar-item--selected {
					font-size: 28rpx;
					font-weight: bold;
					background-color: #fff;
				}
			}
		}

		.secondary {
			flex: 1;
			position: relative;
			// min-height: calc(100vh - 112rpx);
			background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			overflow-y: auto;

			.childrens {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 48rpx;
				margin-bottom: 20rpx;
			}

			.childrens_list {
				flex: 1;
				display: flex;
				max-width: 492rpx;
				height: 48rpx;
				// overflow-x: auto;

				&::-webkit-scrollbar {
					display: none;
				}

				.list_scroll {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-basis: 136rpx;
					flex-shrink: 0;
					font-size: 24rpx;
					white-space: nowrap;

					.item {
						width: 136rpx;
						height: 48rpx;
						line-height: 48rpx;
						padding: 0 20rpx;
						margin-right: 20rpx;
						text-align: center;
						border-radius: 8rpx;
						background-color: #f1f1f1;
						box-sizing: border-box;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						transition: 0.25s;
					}
				}
			}

			.childrens_open {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 40rpx;
				height: 32rpx;
				padding-left: 4rpx;
				border-left: 2rpx solid #eee;
				box-sizing: border-box;
			}

			.overlay {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.5);
			}

			.all_childrens {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				min-height: 220rpx;
				padding: 20rpx;
				background-color: #fff;
				box-sizing: border-box;

				.all_list {
					display: flex;
					flex-flow: row wrap;
					font-size: 24rpx;
					margin-bottom: 32rpx;

					.item {
						width: 136rpx;
						height: 48rpx;
						line-height: 48rpx;
						padding: 0 20rpx;
						margin-right: 20rpx;
						margin-bottom: 16rpx;
						text-align: center;
						border-radius: 8rpx;
						background-color: #f1f1f1;
						box-sizing: border-box;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						transition: 0.25s;
					}
				}

				.closed {
					width: 150rpx;
					margin: 0 auto;
					color: #c9c9c9;
					font-size: 28rpx;
					text-align: center;
				}
			}
		}

		.product_list {
			height: calc(100vh - 266rpx);
			padding-bottom: 50rpx;
			overflow: hidden auto;

			.product {
				display: flex;
				padding: 26rpx 0;
				border-bottom: 2rpx solid #f1f1f1;
				box-sizing: border-box;

				&:first-child {
					padding-top: 0;
				}

				&:last-child {
					border-bottom: none;
				}

				.thumb {
					width: 160rpx;
					height: 160rpx;
					margin-right: 24rpx;
					border-radius: 20rpx;
				}

				.content {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.product_name {
						font-size: 28rpx;
						color: #303030;
						display: -webkit-box; // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
						-webkit-box-orient: vertical; // 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
						-webkit-line-clamp: 2; // 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。
						overflow: hidden;
					}

					.integral {
						font-size: 24rpx;
						color: #b60102;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;

						.Strikethrough {
							font-size: 20rpx;
							color: #B2B2B2FF;
							text-decoration: line-through;
						}

						.iconbg {
							width: 56rpx;
							height: 56rpx;
							background-color: #FCEBEBFF;
							border-radius: 8rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}

		}

	}

	.active {
		color: #fff;
		background-color: #FF7733FF !important;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
}